<template>
  <div class="padding-b160">
    <div class="bg-f5 padding-b20">
      <div class="padding-lr20 card">
        <div class="text-center padding-tb50 text-ff">{{user.user_name}}</div>
        <div class="card_info bg-ff margin-t60 radius-15 position-relative">
          <img class="cover_img radius-50p" :src="user.head_img?user.head_img:$nodata" alt />
          <div
            class="text-center padding-t120 rem-34px padding-lr40"
          >{{link?link.enterprise_title:user.company_name}}</div>
          <div
            class="text-center rem-30px after padding-lr40"
          >{{link?link.position_name:user.position_name}}</div>
          <div class="rem-26px text-33 padding-lr40 line-50 text-wrap padding-b20">
            <div v-for="(item,index) in expose" v-show="item.name != 'jianjie'" :key="index">
              <span v-if="item.value">
                <span>{{item.title}}</span>：
                <span v-if="item.name != 'area_name'" v-html="item.value">{{item.value}}</span>
                <span v-if="item.name == 'area_name' && cityList.length > 2">{{cityList.join(',')}}</span>
              </span>
            </div>
            <span v-if="!token">手机号：请登录并加为好友后可查看联系方式</span>
            <span v-if="token && link.is_friend != 3 && !my">手机号：加为好友后可查看联系方式</span>
          </div>
        </div>
      </div>
    </div>

    <div class="home" @click="$router.push('/')">
      <img src="@/assets/img/home.png" alt />
    </div>

    <!-- 个人简介 -->
    <div class="padding-lr20 bg-ff margin-b150">
      <navtitle>
        <span slot="title_one">个人</span>
        <span slot="title_two">简介</span>
        <span slot="title_three">ABOUT US</span>
      </navtitle>
      <div
        class="rem-26px text-33 text-content padding-lr15 padding-tb20"
        v-html="user.jianjie"
      >{{user.jianjie}}</div>
    </div>

    <!-- 按钮 -->
    <!-- 没有登录 -->
    <div class="btn bg-ff flex justify-between padding-lr40 rem-34px" v-if="!token">
      <div class="sure bg-ff0 text-ff text-center" @click="notoken">登录并加为好友</div>
      <div class="sure bg-ff0 text-ff text-center">
        <div @click="$router.push('/')">链配网首页</div>
      </div>
    </div>
    <!-- 0 我自己 -->
    <div v-if="my"></div>
    <!-- 1 不是好友 -->
    <div
      class="btn bg-ff flex justify-between padding-lr40 rem-34px"
      v-if="link.is_friend == 1 && token"
    >
      <div class="sure bg-ff0 text-ff text-center" @click="friend">申请加好友</div>
      <div class="sure bg-bcb text-ff text-center">
        <div @click="noFriend">拨打电话</div>
      </div>
    </div>
    <!-- 3 已通过 -->
    <div
      class="btn bg-ff flex justify-between padding-lr40 rem-34px"
      v-if="link.is_friend == 3 && token"
    >
      <div class="sure bg-bcb text-ff text-center" @click="setFriend">取消好友关系</div>
      <div class="sure bg-ff0 text-ff text-center">
        <a :href="'tel:' + user.user_phone">拨打电话</a>
      </div>
    </div>
    <!-- 4 已拒绝 -->
    <div
      class="btn bg-ff flex justify-between padding-lr40 rem-34px"
      v-if="link.is_friend == 4 && token"
    >
      <div class="sure bg-ff0 text-ff text-center" @click="friend(2)">重新申请</div>
      <div class="sure bg-bcb text-ff text-center">
        <div @click="noFriend">拨打电话</div>
      </div>
    </div>

    <!-- 2 待同意 别人申请我 -->
    <div
      class="btn bg-ff flex justify-between padding-lr40 rem-34px"
      v-if="link.is_friend == 2 && ftype == 1 && token"
    >
      <div class="sure bg-ff0 text-ff text-center" @click="upfriend">同意</div>
      <div class="sure bg-bcb text-ff text-center">
        <div @click="noFriend">拨打电话</div>
      </div>
    </div>
    <!-- 2 待处理 我申请别人 -->
    <div
      class="btn bg-ff flex justify-between padding-lr40 rem-34px"
      v-if="link.is_friend == 2 && ftype == 2 && token"
    >
      <div class="sure bg-ff0 text-ff text-center">等待对方同意</div>
      <div class="sure bg-bcb text-ff text-center">
        <div @click="noFriend">拨打电话</div>
      </div>
    </div>
  </div>
</template>

<script>
import navtitle from "../../components/navtitle";
const jsApiList = ["onMenuShareAppMessage", "onMenuShareTimeline"];
let wx = {};
if (process.client) {
  wx = require("weixin-js-sdk");
}
// import wx from "weixin-js-sdk";
export default {
  components: {
    navtitle
  },
  data() {
    return {
      type: "",
      id: "",
      expose: {},
      link: {},
      fields: {},
      user: {},
      cityList: [],
      ftype: 0,
      token: "",
      chare: "",
      my: ""
    };
  },
  mounted() {
    document.querySelector("html").style.backgroundColor = "#ffffff";

    this.token = window.localStorage.getItem("token")
      ? window.localStorage.getItem("token")
      : false;
    this.id = this.$route.query.id;
    // 是否是自己
    this.my = this.id == localStorage.getItem("user_id");
    // 企业名片
    this.type = this.$route.query.type;
    // 从分享页进入 判断左上角返回地址 存储缓存
    this.chare = window.location.href.split("type=")[1]
      ? window.location.href.split("type=")[1].split("&")[0]
      : "";
    if (this.chare == 4) {
      window.localStorage.setItem("cardBack", 4);
    }
    this.getIndex(this.id);
  },
  methods: {
    getUrl() {
      let that = this;
      this.$axios
        .post("/common/util/sign", {
          url: window.location.href
        })
        .then(res => {
          let timestamp = res.data.data.timestamp;
          let nonceStr = res.data.data.noncestr;
          let signature = res.data.data.sign;

          wx.config({
            debug: false,
            appId: "wxc776bb6f53038a01",
            timestamp: timestamp,
            nonceStr: nonceStr,
            signature: signature,
            jsApiList: jsApiList
          });

          let user_name = that.user.user_name;
          let head_img = that.user.head_img;

          wx.ready(function() {
            wx.onMenuShareTimeline({
              title: `${user_name} - 链配个人名片`, // 分享标题
              link:
                "http://www.ilianpei.com/recruit/card/?type=4&id=" + that.id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: head_img, // 分享图标
              success() {
                // 用户确认分享后执行的回调函数
              },
              cancel() {
                // 用户取消分享后执行的回调函数
              }
            });
            wx.onMenuShareAppMessage({
              title: `${user_name} - 链配个人名片`, // 分享标题
              desc: that.user.jianjie, // 分享描述
              link:
                "http://www.ilianpei.com/recruit/card/?type=4&id=" + that.id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: head_img, // 分享图标
              success: function() {
                // ("分享给朋友成功");
                // 用户确认分享后执行的回调函数
              },
              cancel: function() {
                // 用户取消分享后执行的回调函数
              }
            });
          });
        });
    },
    setSex() {
      for (let i in this.expose) {
        if (this.expose[i].name == "sex") {
          for (let j in this.expose[i].label_yiji) {
            if (this.expose[i].label_yiji[j].id == this.expose[i].value) {
              this.expose[i].value = this.expose[i].label_yiji[j].title;
            }
          }
        }
      }
    },
    // 城市匹配文字
    setCity() {
      for (let i in this.expose) {
        if (this.expose[i].name == "area_name") {
          let e = this.expose[i].value.split(",");
          let id = "";
          if (e.length > 3) {
            id = this.expose[i].value.split(",").slice(1, 4);
          } else {
            id = this.expose[i].value.split(",");
          }
          for (let j in id) {
            if (id[j] != undefined) {
              this.$axios
                .post("/common/getRegion", {
                  id: j == 0 ? 0 : id[j - 1]
                })
                .then(res => {
                  let data = res.data.data;
                  for (let c in data) {
                    if (data[c].id == id[j]) {
                      this.$set(this.cityList, j, data[c].name);
                    }
                  }
                });
            }
          }
        }
      }
    },
    notoken() {
      // 登录成功后跳转地址
      localStorage.setItem('returnPath', window.location.href)
      
      this.$router.push({
        path: "/recruit/login",
        query: {
          type: "card"
        }
      });
    },
    friend(e) {
      if (!window.localStorage.getItem("token")) {
        // 登录成功后跳转地址
        localStorage.setItem('returnPath', window.location.href)
        
        this.$toast("请退出企业后台后 登录个人账户进行操作");
        this.$router.push({
          path: "/recruit/login",
          query: {
            type: "card"
          }
        });
        return false;
      }

      let url = "";
      let params = "";

      if (this.type == 2) {
        url = "/wap/handle/friend";
        params = {
          token: window.localStorage.getItem("token"),
          type: e == 2 ? 2 : 1, // 是否重新申请
          link_id: this.id
        };
      } else {
        url = "/wap/handle/friendApply";
        params = {
          token: window.localStorage.getItem("token"),
          user_id: this.id
        };
      }

      this.$axios.post(url, params).then(res => {
        this.$toast(res.data.msg);
        if (res.data.code == 0) {
          this.getIndex(this.id);
        }
      });
    },
    getIndex(id) {
      let url;
      let params;
      if (this.chare == 4) {
        // 分享走cardshare接口
        url = "/wap/personal/cardShare";
        params = {
          token: window.localStorage.getItem("token")
            ? window.localStorage.getItem("token")
            : "",
          user_id: id
        };
      } else {
        // 1 8 传user_id,自己传type=1
        url = "/wap/personal/card";
        if (this.my) {
          params = {
            token: window.localStorage.getItem("token"),
            type: 1
          };
        } else {
          params = {
            token: window.localStorage.getItem("token"),
            type: this.type == 2 ? 2 : 8,
            user_id: this.type !=2 ? id : '',
            link_id: this.type == 2 ? id : ''
          };
        }
      }
      this.$axios.post(url, params).then(res => {
        if (!this.token || this.my) {
          // 没有登录 我自己
        } else if (this.chare == 4) {
          this.link = res.data.data.link ? res.data.data.link : "";
          this.ftype = res.data.data.link.type ? res.data.data.link.type : "";
        } else {
          this.link.is_friend = res.data.data.is_friend;
          this.ftype = res.data.data.type ? res.data.data.type : "";
        }

        this.fields = res.data.data.fields;
        this.user = res.data.data.user;
        this.getUrl();
        if (this.user.jianjie) {
          this.user.jianjie.replace(
            /<img/g,
            "<img style='max-width:100%;height:auto;'"
          );
        }
        let expose = [];
        for (let i in this.user) {
          for (let j in this.fields) {
            if (i == this.fields[j].field_name) {
              expose.push({
                title: this.fields[j].c_name,
                name: i,
                value: this.user[i],
                label_yiji: this.fields[j].label_yiji
              });
            }
          }
          if (this.link.is_friend == 3 || this.my) {
            console.log("我的好友/我自己");
          } else {
            if (
              i == "user_phone" &&
              this.link.is_friend != 3 &&
              expose.length > 0
            ) {
              expose[i].value = "登录后并成为好友后即可查看电话~";
            }
          }

          if (!this.token) {
            this.user.user_phone = "登录后并成为好友后即可查看电话~";
          }

          if (i == "area_name") {
            this.setCity();
          }
          if (i == "sex") {
            this.setSex();
          }

          this.expose = expose;
        }
      });
    },
    noFriend() {
      this.$toast("请先添加好友再拨打电话~");
    },
    // 同意好友
    upfriend() {
      this.$axios
        .post("/wap/handle/apply", {
          token: window.localStorage.getItem("token"),
          type: 1,
          user_id: this.id
        })
        .then(res => {
          this.$toast(res.data.msg);
          if (res.data.code == 0) {
            this.getIndex(this.id);
          }
        });
    },
    setFriend() {
      if (!window.localStorage.getItem("token")) {
        // 登录成功后跳转地址
        localStorage.setItem('returnPath', window.location.href)
        
        this.$toast("请退出企业后台后 登录个人账户进行操作");
        this.$router.push({
          path: "/recruit/login",
          query: {
            type: "card"
          }
        });
        return false;
      }
      this.$dialog
        .confirm({
          title: "删除好友",
          message: "您确定要删除该好友吗？"
        })
        .then(() => {
          this.$axios
            .post("/wap/personal/friend/delete", {
              token: window.localStorage.getItem("token"),
              user_id: this.id
            })
            .then(res => {
              this.$toast(res.data.msg);
              if (res.data.code == 0) {
                this.getIndex(this.id);
              }
            });
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style scoped>
.card {
  background: url("../../assets/img/top.png") no-repeat;
  background-size: 100%;
  background-position: left top;
}
.card_info {
  min-height: 4rem;
}
.cover_img {
  width: 1.64rem;
  height: 1.64rem;
  position: absolute;
  top: -0.82rem;
  left: 50%;
  transform: translateX(-50%);
}
/* .letter {
  letter-spacing: 0.06rem;
} */
.after {
  height: 0.8rem;
  line-height: 0.8rem;
}
.after::after {
  content: "";
  display: block;
  width: 0.48rem;
  height: 0.04rem;
  background: #ff0000;
  margin: 0 auto;
}
.btn {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
}
.btn .sure {
  width: 47%;
}
.home {
  position: fixed;
  right: 0.3rem;
  top: 1%;
  width: 0.7rem;
  height: 0.7rem;
  z-index: 2222;
  border-radius: 50%;
  display: flex;
  align-content: center;
  justify-content: center;
}
.home img {
  width: 70%;
  object-fit: contain;
}
</style>